<!-- <template>
    <div class="container">
        <h3>商品展示组件</h3>
        <div class="goods-container">
            <div class="goods-item" v-for="item in 10" :key="item">
                <div class="item-img">
                    <img src="http://img0.baidu.com/it/u=417685738,3488722852&fm=253&app=138&f=JPEG?w=1199&h=800"
                        alt="商品图片" />
                </div>
                <div class="item-info">
                    <p class="item-title">商品名称</p>
                    <p class="item-decip">商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</p>
                    <div class="price">
                        <span class="price-now">￥100</span>
                        <span class="price-old">￥200</span>
                    </div>
                </div>  
            </div>
        </div>
    </div>
</template>

<style scoped>
/* 标题样式设置 */
.container h3 {
    text-align: center;
    border-bottom: 2px solid red;
    margin: 0;
    height: 50px;
    line-height: 50px;
}

/* 容器样式设置 */
.goods-container {
    width: calc(100% - 16px);
    background-color: #ef1f1f;
    margin: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
/* 商品展示组件 */
.goods-item {
    width: 300px;
    height: 350px;
    background-color: #fff;
    margin: 8px 0 0 8px;
    border-radius: 10px;
    margin-left: 8px;
}

/* 商品图片区域 */
.item-img {
    width: 100%;
    height: 200px;
}
/* 商品图片设置 */
.item-img img {
    width: 300px;
    height: auto;
    border-radius: 10px;
    object-fit: contain;
}
/* 商品信息 */
.item-info{
    width: 100%;
    height: 150px;
    background-color: #fff;
}
/* 商品标题 */
.item-info .item-title {
    display: block;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    font-weight: bolder;
    color: #333;
    margin: 0;
    background-color: aqua;
} 
/* 商品描述 */
.item-info .item-decip {
    display: block;
    height: 25px;
    text-align: center;
    line-height: 25px;
    font-size: 10px;
    color: #666;
    margin: 0;
    background-color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* 商品价格区域 */
.price {
    text-align: center;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 现价 */
.price-now {
    font-size: 14px;
    color: #333;
    font-weight: bolder;
}

/* 原价 */
.price-old {
    text-decoration: line-through;
    color: #f61515;
    font-size: 12px;
    margin-left: 10px;
}
</style> -->

<template>
    <ProductList :toDetail="toDetail" :goodsList="goodsList"></ProductList>
</template>

<script setup>
import axios from 'axios'
import {ref,onMounted}  from 'vue'
import ProductList from '@/components/productList.vue'
// 商品组件是否可以跳转详情页
const toDetail = ref(true)
// 商品列表
const goodsList = ref([])
// 获取商品列表
const getGoodsList = async () => {
    const res = await axios.get('/api/goods')
    goodsList.value = res.data
}
getGoodsList()
</script>